<template>
    <div class="dataDerive">
       <div class="title">
           数据导出
       </div>
       <div class="form">
    <el-form
    ref="importData"
    :rules="rules"
    :label-position="'right'"
    :model="form"
     label-width="200px"
    style="max-width: 500px"
  >
    <el-form-item label="数据集组选择:">
         <el-select v-model="form.DatasetGroup" class="m-2" @change="DatasetGroupChange" placeholder="数据集组选择" size="large">
    <el-option
      v-for="item in DatasetGroupSlect"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
    </el-form-item>
      <el-form-item label="数据集选择:">
         <el-select v-model="form.dataSet" class="m-2" placeholder="数据集选择" size="large" @change="dataSetChange">
    <el-option
      v-for="item in dataSetSlect"
      :key="item.photoListId"
      :label="item.name"
      :value="item.photoListId"
    />
  </el-select>
    </el-form-item>
     <el-form-item label="文件名称:" prop="fileName">
           <!-- <input type="file"  ref="inpPath" @change="getPath" style="display:none" /> -->
    <el-input v-model="form.fileName"></el-input>

    </el-form-item>
      <el-form-item label="数据集导出路径:" prop="way">
    <el-input v-model="form.way" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item>
          <el-radio-group v-model="form.fileForm" class="ml-4">
      <el-radio label="yolo" size="small">YOLO格式</el-radio>
      <el-radio label="voc" size="small">VOC格式</el-radio>
      <el-radio label="coco" size="small">COCO格式</el-radio>
    </el-radio-group>
    </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="submit">
        确定
      </el-button>
      <el-button >返回</el-button>
    </el-form-item>
  </el-form>
       </div>
    </div>
</template>
<script lang="ts">
import FileSaver from 'file-saver'
import {Collection} from "@/apis/collection/index"
import {dataDerive} from "@/apis/dataDerive"
import { RequestCode } from '@/server/base'
export default {
    name:'DataDerive',
    data(){
        return {
            form:{
                dataSet:'',
                DatasetGroup:'',
                fileName:'',
                way:'',
                fileForm:'yolo'
            },
            rules:{
              fileName:[{ required: true, message: '请输入文件名称', trigger: 'blur'}],
              // way:[{required: true, message: '数据集导出路径不能为空', trigger: 'blur'}]
            },
            dataSetSlect:[] as any,
            DatasetGroupSlect:[],
            exportData:{} as any,
            url:'',
            dataStream:[] as any
        }
    },
    created(){
      this.getProject()
    },
    methods:{
      getProject(){
        dataDerive.getProject().then((res:RequestCode)=>{
          this.DatasetGroupSlect=res.data
        })
      },
      imageCollection(){
        this.dataSetSlect=[]
          Collection.imageCollection('','').then((res:RequestCode)=>{
            let data:any=res.data
            data.forEach((item:any)=>{
              if(item.image[0].photo.projectId==this.form.DatasetGroup){
                    let obj :any={
                photoListId:item.image[0].photo.id,
                name:item.image[0].photo.name,
                type:item.image[0].photo.type
              }
              this.dataSetSlect.push(obj)
              }
          
            })
          })
        
      }, 
      submit(){
          (this as any).$refs.importData.validate((valid : any) => {
          if (valid) {
            dataDerive.exportFile({photoListId:this.form.dataSet,type:this.form.fileForm}).then((res:RequestCode)=>{
                this.doneLoad(res.data,0,1024 * 1024 *500)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      doneLoad(path:string,offset:number,size:number){
           dataDerive.download({filePath:path,offset:offset,size:size}).then((res:RequestCode)=>{
               this.dataStream.push(`${res.data.bytes}`); // 文件内容（base64）
              if(offset+size <res.data.fileSize){
                  let start=offset+size
                this.doneLoad(path,start,size)
              }else{
                this.saveFileDownload()
              }
                
             })
      },
      saveFileDownload(){
           let arrBlob: any[] = [];
        this.dataStream.forEach((ele: string) => {
            var bstr = atob(ele),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            arrBlob.push(u8arr);
        });
        let saveFile = new Blob(arrBlob, {type: 'application/zip'});
        FileSaver.saveAs(saveFile, this.form.fileName);
        this.dataStream = [];
      },
      DatasetGroupChange(val:number){
        this.imageCollection()
      }
      
    }
}
</script>
<style lang="scss" scoped>
.dataDerive{
    box-sizing: border-box;
    padding: 20px 15px;
    background: #fff;
    width: 100%;
        .title{
        height: 60px;
        box-sizing: border-box;
        padding-left: 30px;
        border-bottom: 1px solid rgb(240, 240, 240);
        line-height: 60px;
        font-size: 16px;
        font-weight: 700;
    }
    .form{
         padding: 20px 0;
    }
}
</style>